<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="../inc/meta.jsp" %>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <%@ include file="../inc/css.jsp" %>
    <%--<%@ include file="../inc/js.jsp" %>--%>
</head>

<body class="childrenBody">
<form class="layui-form" style="width:80%;">
    <input type="hidden" id="userId"/>
    <input type="hidden" id="oldImageUrl"/>
    <input type="hidden" id="imageUrl"/>
    <div class="layui-form-item layui-row layui-col-xs6">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" autocomplete="off" maxlength="20" id="account" lay-verify="account" placeholder="请输入账号">
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs6">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" autocomplete="off" maxlength="20" id="name" lay-verify="name" placeholder="请输入姓名">
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs6">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" autocomplete="off" maxlength="20" id="mobile" lay-verify="required|phone" placeholder="请输入手机号">
        </div>
    </div>
    <div class="layui-form-item layui-row">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="0" title="男" checked>
            <input type="radio" name="sex" value="1" title="女">
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs6">
        <label class="layui-form-label">对应角色</label>
        <div class="layui-input-block">
            <select id="roleList"></select>
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs6">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="saveInfo">保存</button>
            <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>

<script type="text/javascript" src="static/layuicms2.0/layui/layui.js"></script>

<script>
    var form;
    layui.use(['form', 'layer', 'upload'], function () {
        form = layui.form;
        var layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery;

        //自定义验证规则
        form.verify({
            account: function (value) {
                if (value.length < 3) {
                    return '账号至少得3个字符啊';
                }
            },
            name: function (value) {
                if (value.length < 2) {
                    return '姓名至少得2个字符啊';
                }
            }
        });

        form.on("submit(saveInfo)", function (data) {
            var userId = $("#userId").val();
            //弹出loading
            var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
            // 实际使用时的提交信息
            $.post("backend/master/save", {
                id: userId,
                account: $("#account").val(),
                name: $("#name").val(),
                mobile: $("#mobile").val(),
                roleId: $('#roleList').val(),
                sex: $('input[name="sex"]:checked').val()
            }, function (res) {
                if (res === 1) {
                    top.layer.close(index);
                    if (null != userId && userId !== '') {
                        top.layer.msg("用户修改成功！");
                    } else {
                        top.layer.msg("用户添加成功！");
                    }
                    layer.closeAll("iframe");
                    //刷新父页面
                    parent.location.reload();
                } else if (res === -1) {
                    top.layer.msg("账号重复，用户添加失败！");
                } else {
                    top.layer.close(index);
                    if (null != userId && userId !== '') {
                        top.layer.msg("用户修改失败！");
                    } else {
                        top.layer.msg("用户添加失败！");
                    }
                }
            });
            return false;
        });
    });
</script>

</html>